<template>
  <div style="height: 100%;">
    
    
    <div class="box1">
      <div style="display: inline-flex;margin-top: 5px;text-align: left;">
        <img style="height: 48px;margin-top: 0.2vh;" src="../../assets/images/compare.png">
        <div style="margin-left: 5px;margin-top:14px;font-family:emoji;color: #f2f2f2;font-size: 0.9vw;">对比基准1：波士顿咨询公司和欧阳明高院士联合发布的《中国氢能产业展望》不同电价下的平准化制氢成本</div>
      </div>
  
    </div>
    
    <div class="box2">

      <el-table ref="table" height="230" :data="tableData1" tooltip-effect="dark" style="width: 100%">
  
        <el-table-column
          prop="data1"
          label="电价(元/kWh)"
          align="center">
        </el-table-column>

        <el-table-column
          prop="data2"
          label="对比基准平准化制氢成本(元/kgH2)"
          align="center">
        </el-table-column>

        <el-table-column
          prop="data3"
          label="模型计算平准化制氢成本(元/kgH2)"
          align="center">
        </el-table-column>

        <el-table-column
          prop="data4"
          label="模型误差(%)"
          align="center">
        </el-table-column>
     
      </el-table>

    </div>


    
    
    <div class="box3">
      <div style="display: inline-flex;margin-top: 5px;text-align: left;">
        <img style="height: 48px;margin-top: 0.2vh;" src="../../assets/images/compare.png">
        <div style="margin-left: 5px;margin-top:14px;font-family:emoji;color: #f2f2f2;font-size: 0.9vw;">对比基准2：潍坊华电制氢厂示范工程</div>
      </div>
       
    </div>
    
    <div class="box4">

      <el-table ref="table" height="230" :data="tableData2" tooltip-effect="dark" style="width: 100%">
  
        <el-table-column
          prop="data1"
          label="电价(元/kWh)"
          align="center">
        </el-table-column>

        <el-table-column
          prop="data2"
          label="对比基准平准化制氢成本(元/kgH2)"
          align="center">
        </el-table-column>

        <el-table-column
          prop="data3"
          label="模型计算平准化制氢成本(元/kgH2)"
          align="center">
        </el-table-column>

        <el-table-column
          prop="data4"
          label="模型误差(%)"
          align="center">
        </el-table-column>
     
      </el-table>

    </div>

  </div>
</template>

<script>
 

  export default {
    name: 'hpErrorModel',
    components: {
      
     },

    data() {
      return {
        tableData1:[
           
        ],
        tableData2:[
           
        ],
        projectId : "",
      }
    },
    mounted: function() {
      //获取项目id
      this.projectId = this.$route.query.projectId;
      this.verificat();
    },
    methods: {  
      
      verificat : function(){
        
        var type = "hpErrorModel";

        var vm = this;  

        this.$http.post('/iepsapi/ea/hpEconomicAnalysis/verificat?type='+type+"&projectId="+this.projectId).then((res) => { 
          var result = res.data;
          
          if(result){
            vm.tableData1 = result.tableData1;
            vm.tableData2 = result.tableData2;
          }
        }).catch((error) => {
          console.log(error);
        });

      },
 
 
    


    }
  }
</script>


<style>

  .el-message-box {
      display: inline-block;
      width: 420px;
      padding-bottom: 10px;
      vertical-align: middle;
      background-color: #263675;
      border-radius: 4px;
      border: 1px solid #354b80;
      font-size: 18px;
      -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
      text-align: left;
      overflow: hidden;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
  }
  .el-message-box__title {
    padding-left: 0;
    margin-bottom: 0;
    font-size: 18px;
    line-height: 1;
    color: #ffffff;
  }

  .el-message-box__content {
    padding: 10px 15px;
    color: #fff;
    font-size: 14px;
  }
</style>

<style scoped>


/deep/ .el-table th.el-table__cell.is-leaf {
     border-bottom: none;
 }
 /deep/ .el-table::before{
     background-color:transparent;
 }



    .titleDiv {
      width: 100%;
      margin: 0.5vh;
      height: 2.5vh; 
      font-weight: bold; 
      -webkit-box-shadow: none;
      box-shadow: none;
      font-weight: 700;
      font-style: normal;
      font-size: 2vh;
      color: #f2f2f2;
      text-align: left;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      position: relative;
    }
    .barColorBox {
      height: 2.5vh;
      width: 0.7vh;
      border-radius: 1px;
      display: inline-block;
      vertical-align: text-bottom;
      border: none;
      box-shadow: 0 -1px 10px rgba(0,0,0,0.1);
      background-color: #FAFAFA;
      background-image: -webkit-linear-gradient(top,#17b4db,#07c968);
      background-image: -o-linear-gradient(top,#17b4db,#07c968);
      background-image: -ms-linear-gradient(top,#17b4db,#07c968);
      background-image: linear-gradient(top,#17b4db,#07c968);
      background-repeat: repeat-x;
    }

    .titlefont {
      flex: 1;
      height: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      font-size: 1.8vh;
      padding-left: 5px;
      margin-top: 0vh;
    } 
    
  .box1{ 
    width: 98%;
    height: 6vh;
    margin: auto;
    border-radius: 5px;
    text-align: left;
    margin: auto;
    margin-top: 1vh;
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

 

  .box2{ 
    width: 96%;
    height: 26vh;
    margin-top: 1vh;
    margin: 0 auto;
    padding: 15px;
    top: 17.5vh;
    left: 3.5vh;
    position: absolute;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

  
  .box3{ 
    width: 98%;
    height: 6vh;
    margin: auto;
    border-radius: 5px;
    text-align: left;
    margin: auto;
    margin-top: 29vh;
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

 

  .box4{ 
    width: 96%;
    height: 26vh;
    margin-top: 1vh;
    margin: 0 auto;
    padding: 15px;
    top: 52.5vh;
    left: 3.5vh;
    position: absolute;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }


</style>
